<!--
* @author: lzm
* @date: 2023年12月8日 15:04:10
* @description：选择物料弹窗
* @update: 2023年12月8日 15:04:10
-->
<template>
  <div>
    <el-dialog
      title='物料详情'
      :visible='showDialog'
      width='50%'
      center
      custom-class='my-dialog'
      @close='close'
      :close-on-click-modal='false'
      :close-on-press-escape='false'
      append-to-body>
      <div class='un-box'>
        <div class='un-box-item flex'>
          <div class='un-box-item-left'>物料名称：</div>
          <div>{{ currentUnBindingData.goodsName }}</div>
        </div>
        <div class='un-box-item flex'>
          <div class='un-box-item-left'>物料规格：</div>
          <div>{{ currentUnBindingData.goodsModel }}</div>
        </div>
        <div class='un-box-item flex'>
          <div class='un-box-item-left'>物料图片：</div>
          <div>
            <el-image
              v-if='currentUnBindingData.goodsImage'
              class='img-sty'
              :src='currentUnBindingData.goodsImage'
              :preview-src-list="srcList">
            </el-image>
            <template v-else>
              <img class='img-sty' src='@/assets/shelf_manage_img/goods-default.png' alt='加载失败'>
              <div class='un-box-item-tip'>默认图片(未上传物料图片)</div>
            </template>
          </div>
        </div>
        <div class='un-box-item flex'>
          <div class='un-box-item-left'>量程：</div>
          <div>
            {{ currentUnBindingData.weightMax }}
          </div>
          <el-button
            type='primary'
            size='mini'
            style='margin-left: 30px;'
            @click='saveWeight'>
            获取量程
          </el-button>

        </div>
        <div class='un-box-item flex'>
          <div class='un-box-item-left'>库存：</div>
          <div>{{ currentUnBindingData.goodsStock }}</div>
        </div>
        <div class='un-box-item flex'>
          <div class='un-box-item-left'>磅位：</div>
          <div>{{ currentUnBindingData.weightCode }}</div>
        </div>
        <div class='un-box-item flex' style='align-items: center;'>
          <div class='un-box-item-left'>单重：</div>
          <div>{{ currentUnBindingData.goodsSingleWeight }}g</div>
          <el-button
            type='primary'
            size='mini'
            style='margin-left: 30px;'
            @click='getSingleWeight'>
            获取单重
          </el-button>
        </div>
      </div>
      <div slot='footer' class='dialog-footer'>
        <el-button type='primary' class='chamfer-98' @click='confirmBtn'>关闭</el-button>
        <el-button type='primary' class='chamfer-98' @click='unBinding'>解绑</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { singleWeight, unbindSave, updateRange} from '@/api/locatorManage'

export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    currentUnBindingData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },

  data() {
    return {
      srcList: [this.currentUnBindingData.goodsImage],
      isEditingWeight: false,
      editWeightValue: ''
    }
  },

  methods: {
    confirmBtn() {
      this.$emit('update:showDialog', false)
    },

    updateLc() {
      if (this.isEditingWeight) {
        // 保存量程
        this.saveWeight()
      } else {
        // 进入编辑模式
        this.isEditingWeight = true
        this.editWeightValue = this.currentUnBindingData.weightMax
      }
    },

    async saveWeight() {
      updateRange({
        id: this.currentUnBindingData.id,
        status: true,
      }).then(res => {
        if (res.status === '2000') {
          console.log(res);
          //this.currentUnBindingData.goodsSingleWeight = res.result.weight;
        //  this.currentUnBindingData.goodsStock = res.result.goodsStock;
          this.$message({
            type: 'success',
            message: '获取成功'
          })
        }
      })

    },

    getSingleWeight() {
      singleWeight({
        id: this.currentUnBindingData.id,
        status: true,
      }).then(res => {
        if (res.status === '2000') {
          this.currentUnBindingData.goodsSingleWeight = res.result.weight;
          this.currentUnBindingData.goodsStock = res.result.goodsStock;
          this.$message({
            type: 'success',
            message: '获取成功'
          })
        }
      })
    },

    unBinding() {
      this.$confirm('此操作将物料从库位解绑, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        unbindSave([this.currentUnBindingData.id]).then(res => {
          if (res.status === '2000') {
            this.$message({
              type: 'success',
              message: '解绑成功'
            })
            this.$emit('update:showDialog', false)
            this.$emit('unBindingComplete')
          }
        })
      })
    },

    close() {
      this.$emit('update:showDialog', false)
      this.isEditingWeight = false
      this.editWeightValue = ''
    }
  }
}
</script>
<style scoped lang='scss'>
@import '@/styles/_handle.scss';

.un-box {
  border: 1px solid #E6EBF5;
  color: #FFFFFF;
  font-size: 18px;

  &-item {
    padding: 10px 20px;

    &-left {
      width: 90px;
      text-align: right;
      margin-right: 20px;
    }

    &-tip {
      color: #c4c0c0;
      font-size: 14px;
      margin-top: 10px;
    }

    .img-sty {
      width: 70px;
      height: 70px;
    }
  }
}

.chamfer-98 {
  font-size: 18px;
}
</style>
